Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт «Повтор недавней покупки» позволяет пользователям в один клик помещать всё содержимое одного из прошлых заказов в корзину.

Особенности

• Размещение на странице заказа кнопки "Повторить заказ". После нажатия на кнопку содержимое заказа добавляется в корзину и пользователь направляется на страницу оформления заказа;
• Размещение в корзине (или любом другом месте сайта) кнопки "Повторить заказ". После нажатия на кнопку появляется всплывающее окно с содержимым предыдущего заказа. В этом окне пользователь может добавить весь заказ в корзину или кнопками "Назад"/"Вперед" перемещаться от одного своего заказа к другому.

Кому подойдет?

• Магазинам, которые имеют периодические заказы от постоянных клиентов. Решение позволяет существенно сократить время поиска и добавления товара в корзину. Пользователи могут использовать свои заказы как шаблоны, чтобы в следующий раз одним кликом приступить к их редактированию.
• Магазинам, которые планируют увеличивать количество повторных продаж.

Требования к установке:
• активированный модуль интернет-магазин;
• включенная опция "Выполнять переход на страницу заказа при нажатиях на ссылки "Просмотр заказа" на странице управления заказами" (Интернет магазин – Настройки модуля);
  
  
  
  
• включенная опция "Наименование товара отображать как ссылку" (Интернет магазин – Управление полями заказа).
  
  
  
  

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в папку js и загрузите в эту папку файл "um.repeatOrder.js" из архива со скриптом (папка "скрипты").

Второй шаг: установка кода

Перейдите в панель управления и выберите в главном меню Дизайн – Управление дизайном (шаблоны). На открывшейся странице выберите Нижняя часть сайта:

Добавьте код в самый конец шаблона:

<?if $MODULE_ID$ = 'shop'?>
<script src="/js/um.repeatOrder.js"></script>
<?endif?>

нажмите "Сохранить".

Перейдите в панель управления и выберите в главном меню Дизайн – Управление дизайном (шаблоны). На открывшейся странице выберите Корзина:

Добавьте код кнопки в подходящее место шаблона:

<button class="um-reorder-link btn btn-default">Повторить последний заказ</button>

нажмите "Сохранить".

Перейдите в панель управления и выберите в главном меню Дизайн – Управление дизайном (шаблоны). На открывшейся странице выберите Страница заказа:

Добавьте код кнопки в подходящее место шаблона:

<button class="um-reorder-this btn btn-default">Повторить этот заказ</button>

нажмите "Сохранить".

Третий шаг: установка стилей

При отображении таблиц с заказами используются стили вашего сайта. Так, вам не нужно редактировать CSS для настройки вида таблиц.

Чтобы настроить вид кнопок "Повторить заказ", а также кнопок навигации по заказам, перейдите в панель управления и в главном меню выберите Дизайн – Управление дизайном (CSS). На открывшейся странице разместите следующие стили:

/* Внешний вид кнопок*/
.um-reorder .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.um-reorder .btn-golden {
    background-color: #ffd700;
    color: #666;
    border-color: #daa520;
}
.um-reorder .btn-golden:hover {
    color: #666;
    background-color: #eac500;
    border-color: #bf901c;
}
.um-reorder .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.um-reorder .btn-default:hover {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

Например, так:

нажмите "Сохранить".

Информация о классах:

• #um-reorder – контейнер, в который помещаются таблицы с заказами (по умолчанию имеет стиль fancybox);
• #um-reorder>.um-reorder – контейнер с заказом;
• #um-reorder>.um-reorder>h2 – заголовок заказа;
• #um-reorder>.um-reorder>.btn-golden – кнопка перехода к оформлению заказа;
• #um-reorder>.um-reorder>.next – кнопка перехода к следующему заказу;
• #um-reorder>.um-reorder>.prev – кнопка перехода к предыдущему заказу;
• .um-reorder-this – кнопка добавления содержимого заказа и перехода на страницу оформления. Работает только на странице заказа;
• .um-reorder-link – кнопка вызова диалогового окна для управления заказами. Работает на любой странице сайта.

Четвёртый шаг: настройка и использование

Вы можете использовать кнопки повтора заказа в нескольких местах на странице. Встраивать их в шапку сайта или в шаблон нижней части.

Чтобы изменить классы или текст кнопок "Перейти к оформления", "Назад", "Вперед", отредактируйте их код на строках 32, 33, 34 соответственно в файле "um.repeatOrder.js".